<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>navDemo</title>
    <link rel="stylesheet" href="./css/navDemo.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_469234_fgz5ky8ztb6.css">
    <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
  
</head>

    <style>

/*框架中已经有了，可以去掉*/
    body{
        padding: 0;
        margin:0;
        font-family: "Microsoft YaHei";
            background: #FFF;

    }

 
</style>

<body>
    <div class="navBox">
        <div class="logo"></div>
        <ul class="navKeyBox" id="boxMain">
            <li v-for="item in navData" >
                <span class='navKey'> <i :class="'iconfont '+item.Icon"></i>
                    {{item.FuncName}}
                </span>

                <div class="menuDiv"  v-for="itemli in item.ChildFuncs">
                    <div class="boxWrap">
                        <dl>
                            <dt>{{itemli.FuncName}}</dt>
                            <dd  v-for="itemlii in itemli.ChildFuncs">
                                <a :href="itemlii.TargetURL">{{itemlii.FuncName}}</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </li>

        </ul>

        <ul class="systemCenter">
            <li id="chunkbell" class="chunkbell animated"> <i class="iconfont icon-bell" title="消息通知" style="font-size:19px;"></i>
            </li>

            <li class="item">
                <span title="用户中心">
                    <i class="iconfont icon-yonghu"  style="font-size:23px;vertical-align: middle;"></i>
                    <span class="user-info">欢迎您:admin</span>
                    <i class="iconfont icon-xiala"></i>
                </span>

                <div class="user-menu">
                    <div>
                        <a href="#">
                            <i class="iconfont icon-shezhi1"></i>
                            设置
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <i class="iconfont icon-yonghu2"></i>
                            个人资料
                        </a>
                    </div>
                    <div>
                        <a href="/Home/Logout">
                            <i class="iconfont icon-tuichu1"></i>
                            退出
                        </a>
                    </div>

                </div>
            </li>
        </ul>
    </div>

    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="./js/jquery-1.10.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="./js/navDemo.js"></script>
    <script defer>
      

      Mock.mock('https://mapbar.com/mdeditor', [{
        "FuncID": "1",
        "ParentFuncID": "0",
        "FuncName": "系统管理",
        "TargetURL": "",
        "Icon": "icon-multilayer",
        "IsHomeSetting": "0",
        "PluginName": null,
        "DisplayOrder": "9",
        "ChildFuncs": [{
            "FuncID": "11",
            "ParentFuncID": "1",
            "FuncName": "组织机构管理",
            "Icon": "",
            "IsHomeSetting": "0",
            "PluginName": null,
            "DisplayOrder": "1",
            "ChildFuncs": [{
                    "FuncID": "12",
                    "ParentFuncID": "11",
                    "FuncName": "组织机构管理",
                    "TargetURL": "/Plugins/RM/SystemManage/OrgManage",
                    "Icon": "",
                    "IsHomeSetting": "0",
                    "PluginName": null,
                    "DisplayOrder": "1"
            }],
            "FuncType": "1"
        }]

    },
    {
        "FuncID": "1",
        "ParentFuncID": "0",
        "FuncName": "系统管理2",
        "TargetURL": "",
        "Icon": "icon-multilayer",
        "IsHomeSetting": "0",
        "PluginName": null,
        "DisplayOrder": "9",
        "ChildFuncs": [{
            "FuncID": "11",
            "ParentFuncID": "1",
            "FuncName": "组织机构管理2",
            "Icon": "",
            "IsHomeSetting": "0",
            "PluginName": null,
            "DisplayOrder": "1",
            "ChildFuncs": [{
                    "FuncID": "12",
                    "ParentFuncID": "11",
                    "FuncName": "组织机构管理2",
                    "TargetURL": "/Plugins/RM/SystemManage/OrgManage",
                    "Icon": "",
                    "IsHomeSetting": "0",
                    "PluginName": null,
                    "DisplayOrder": "1"
            }],
            "FuncType": "1"
        }]

    }

    ]);
  

      new Vue({
        el: '#boxMain',
        data: {
            "navData": []
        },
        created: function () {
           
            var _this = this; //this的指向问题
            //再进行数据请求
            $.get('https://mapbar.com/mdeditor', function (data) {
                var data = JSON.parse(data);
                _this.navData = data;
                console.log(_this.navData);
            });
        },
        updated:function(){
              $.GWT.UI.nav.create();
        }
    });


      
   
    </script>
</body>

</html>